<template>
  <v-card title="折叠列">
    <div>
      <vcu-table border ref="xTable" :data="tableData">
        <vcu-table-column
          type="checkbox"
          width="60"
          align="center"
        ></vcu-table-column>
        <vcu-table-column field="name" title="Name" width="200">
          <template #header>
            <icon-font
              :type="collapsable1 ? 'icon-minus-square' : 'icon-plus-square'"
              @click="collapsable1Event"
            ></icon-font>
            <span>Name</span>
          </template>
        </vcu-table-column>
        <vcu-table-column
          field="role"
          title="Role"
          :visible="false"
          width="200"
        ></vcu-table-column>
        <vcu-table-column
          field="sex"
          title="Sex"
          :visible="false"
          width="200"
        ></vcu-table-column>
        <vcu-table-column field="age" title="Age" width="200">
          <template #header>
            <icon-font
              :type="collapsable2 ? 'icon-minus-square' : 'icon-plus-square'"
              @click="collapsable2Event"
            ></icon-font>
            <span>Age</span>
          </template>
        </vcu-table-column>
        <vcu-table-column
          field="rate"
          title="Rate"
          :visible="false"
          width="200"
        ></vcu-table-column>
        <vcu-table-column
          field="address"
          title="Address"
          :visible="false"
          width="200"
        ></vcu-table-column>
      </vcu-table>
    </div>
  </v-card>
</template>
<script>
export default {
  data() {
    return {
      collapsable1: false,
      collapsable2: false,
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "好好学习天天向上",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women ",
          age: 24,
          address: "Shanghai",
        },
      ],
    };
  },
  methods: {
    collapsable1Event() {
      const fields = ["role", "sex"];
      this.collapsable1 = !this.collapsable1;
      const xTable = this.$refs.xTable;
      fields.forEach((field) => {
        const column = xTable.getColumnByField(field);
        column.visible = this.collapsable1;
      });
      xTable.refreshColumn();
    },
    collapsable2Event() {
      const fields = ["rate", "address"];
      this.collapsable2 = !this.collapsable2;
      const xTable = this.$refs.xTable;
      fields.forEach((field) => {
        const column = xTable.getColumnByField(field);
        column.visible = this.collapsable2;
      });
      xTable.refreshColumn();
    },
  },
};
</script>

